<template>
  <div class="editor-box"
       :style="'width:'+width">
    <!-- 图片上传组件辅助-->
    <!-- <el-upload class="avatar-uploader"
               :action="rootUrl"
               :name="file"
               :data="uploadData"
               :headers="header"
               :show-file-list="false"
               :on-success="uploadSuccess"
               :on-error="uploadError"
               :before-upload="beforeUpload"></el-upload> -->
    <!-- 视频上传 -->
    <div class="floatBox"
         v-if="upvideoShow">
      <div class="model-box"
           @click="upvideoShow=false"></div>
      <div class="floatsmBox">
        <update-video @change="videoUrlFun"
                      :titleInfo="true"  />
      </div>
    </div>
    <div style="display: none;"
         id="upvideoshow"
         @click="upvideoShow=true"></div>
    <!-- 图片上传 -->
    <div class="floatBox"
         v-if="upImgShow">
      <div class="model-box"
           @click="upImgShow=false"></div>
      <div class="floatsmBox">
        <update-img @change="imgUrlFun"
                    imgUrl="" ></update-img>
      </div>
    </div>
    <div style="display: none;"
         id="upImgShow"
         @click="upImgShow=true"></div>

    <quill-editor ref="myTextEditor"
                  :content="content"
                  :options="editorOption"
                  @change="onEditorChange($event)"></quill-editor>
  </div>
</template>

<script>
import * as api from "./../api/api";
import { API_ROOT, OSS_RUL_BUCKET } from "./../config";
import { quillEditor, Quill } from "vue-quill-editor";
import ImageResize from "quill-image-resize-module";

Quill.register("modules/imageResize", ImageResize);
import { addQuillTitle } from "./title";
import "./style/font.css"; //css文件引入
import "./style/size.css"; //css文件引入
// require styles 引入样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

//自定义字体大小
var sizes = [false, "16px", "18px", "20px", "22px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
Quill.register(Size, true);

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction
  // [{ size: sizes }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: fonts }],
  [{ align: [] }],
  ["image", "video", "formula"],
  ["clean"] // remove formatting button
];

export default {
  props: {
    width: {
      default: "350px"
    },
    content: {
      default: "",
      type: String
    }
  },
  data () {
    return {
      rootUrl: '',
      // uploadData: {},
      upvideoShow: false, //控制上传视频展示
      videofile: "",
      header: {
        token: sessionStorage.getItem("h_token")
      },
      upImgShow: false, //控制上传视频展示
      editorOption: {
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        placeholder: "",
        theme: "snow", // or 'bubble'
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },

          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector("#upImgShow").click();
                } else {
                  this.quill.format("image", false);
                }
              },
              video: function (val) {
                document.querySelector("#upvideoshow").click();
              }
            }
          }
        }
      }
    };
  },
  components: {
    quillEditor
  },
  mounted () {
    addQuillTitle();
  },
  methods: {
    //获取上传图片地址
    // getuploadSign () {
    //   api.uploadSign().then(res => {
    //     if (res.data.code == 200) {
    //       let resData = res.data.data;
    //       this.uploadData = {
    //         OSSAccessKeyId: resData.OSSAccessKeyId,
    //         Signature: resData.Signature,
    //         policy: resData.policy,
    //       }
    //       this.rootUrl = 'http://' + resData.domain;
    //     }
    //   });
    // },
    //上传视频
    videoUrlFun (dataList, audioLength) {
      console.log(dataList, audioLength);
      this.upvideoShow = false;
      let quill = this.$refs.myTextEditor.quill;
      if (dataList) {
        let length = quill.selection.savedRange.index;
        quill.insertEmbed(length, "video", dataList);
        quill.setSelection(length + 1);
      }
    },
    //上传图片
    imgUrlFun (url) {
      this.upImgShow = false;
      let quill = this.$refs.myTextEditor.quill;
      if (url) {
        // 获取光标所在位置
        let length = quill.selection.savedRange.index;
        // 插入图片  res.data.data为服务器返回的图片地址
        quill.insertEmbed(
          length,
          "image",
           url
        );
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    onEditorChange ({ editor, html, text }) {
      this.$emit("change", html);
    },
    // beforeUpload () {
    //   // 显示loading动画
    //   this.quillUpdateImg = true;
    // },

    // uploadSuccess (res, file) {
    //   // res为图片服务器返回的数据
    //   // 获取富文本组件实例
    //   let quill = this.$refs.myTextEditor.quill;
    //   // 如果上传成功
    //   if (res.code == 200 && res.data != null) {
    //     // 获取光标所在位置
    //     let length = quill.getSelection().index;
    //     // 插入图片  res.data.data为服务器返回的图片地址
    //     quill.insertEmbed(
    //       length,
    //       "image",
    //       sessionStorage.getItem("imgUrl") + "/" + res.data.url
    //     );
    //     // 调整光标到最后
    //     quill.setSelection(length + 1);
    //   } else {
    //     this.$message.error("图片插入失败");
    //   }
    //   // loading动画消失
    //   this.quillUpdateImg = false;
    // },

    // // 富文本图片上传失败
    // uploadError () {
    //   // loading动画消失
    //   this.quillUpdateImg = false;
    //   this.$message.error("图片插入失败");
    // },
    cancelupVideo () {
      //取消上传视频 关闭浮层并清除文件
      this.$refs.videofilereset.reset();
      this.upvideoShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.editor-box {
  height: 100%;
  font-size: 14px;
  background: #fff;
  display: inline-block;
  position: relative;
  .quill-editor {
    height: 300px;
  }
  .model-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
  }
  .floatsmBox {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -80px;
    z-index: 1001;
  }
}
</style>
